<template>
	<view class="box-c">
		<scroll-view scroll-y="true" style="background-color: #f8f8f8;" :style="{height: Height+'px'}">
			<view class="bg-box py-2 px-3 order-info ">
				<view class="title box d-jc-sb text-color">
					<view class="">
						订单信息
					</view>
					<view class="" v-if="orderInfo.orderStatus==1">
						用户已支付
					</view>
					<view class="" v-if="orderInfo.orderStatus==2">
						订单已完成
					</view>
					<view class="" v-if="orderInfo.orderStatus==3">
						超时取消
					</view>
					<view class="" v-if="orderInfo.orderStatus==4">
						用户已取消
					</view>
					<view class="" v-if="orderInfo.orderStatus==-1">
						未支付
					</view>

					<view class="" v-if="orderInfo.orderStatus==-3">
						退款中
					</view>
					<view class="" v-if="orderInfo.orderStatus==-4">
						已退款
					</view>
					<view class="" v-if="orderInfo.orderStatus==-5">
						退款失败
					</view>

				</view>
				<view class="line my-1"></view>
				<view class="box d-jc-sb ">
					<text>订单编号</text>
					<text>{{orderInfo.orderNumber}}</text>
				</view>
				<view class="box d-jc-sb mt-1">
					<text>下单时间</text>
					<text>{{orderInfo.createTime}}</text>
				</view>
				<view class="box d-jc-sb mt-1">
					<text>用户名</text>
					<text>{{orderInfo.name}}</text>
				</view>
				<view class="box d-jc-sb mt-1">
					<text>手机号</text>
					<text>{{orderInfo.phone}}</text>
				</view>
				<view class="line my-1"></view>
				<view class="box d-jc-sb">
					<text>付款总额</text>
					<text>{{orderInfo.goodsPrice}}积分</text>
				</view>

			</view>
			<view class="bg-box py-2 px-3 order-content" v-show="orderInfo.orderStatus==-3 ||orderInfo.orderStatus==-4||orderInfo.orderStatus==-5">
				<view class="title">
					订单内容
				</view>
				<view class="line my-1"></view>
				<view class="">
					<view class="box content d-ai-c my-2 " v-for="(item,index) in refundInfoData.refundGoods">
						<view class="flex-8 box ml-1 ">
							<view class="box d-jc-c ">
								<image :src="item.logo" mode=""></image>
							</view>
							<view class="box-c d-jc-sb ml-1">
								<text class="title">{{item.name}}</text>
								<text class="text-pink">{{item.price}}积分</text>
							</view>
						</view>
						<view class="flex-1 box">
							<text class="number">x{{item.number}}</text>

						</view>
					</view>
				</view>

			</view>
			<view class="bg-box3 p-2 refund"
				v-show="orderInfo.orderStatus==-3 ||orderInfo.orderStatus==-4||orderInfo.orderStatus==-5">
				<view class="refund-title box d-jc-sb">
					<view class="">退款详情</view>
					<view class="" v-if="orderInfo.orderStatus==-3 ">正在退款</view>
					<view class="" v-if="orderInfo.orderStatus==-4 ">已退款</view>
					<view class="" v-if="orderInfo.orderStatus==-5 ">退款失败</view>

				</view>
				<view class="box mt-1">
					<text>
						申请时间
					</text>
					<text>
						{{refundInfoData.createTime}}
					</text>
				</view>
				<view class="box mt-1">
					<text>
						退款类型
					</text>
					<text>
						{{refundInfoData.typeName}}
					</text>
				</view>
				<view class="box mt-1">
					<text>
						退款原因
					</text>
					<text>
						{{refundInfoData.causeName}}
					</text>
				</view>
				<view class="box reason mt-1">
					<text>
						退款理由
					</text>
					<text>
						{{refundInfoData.refundRemark}}
					</text>
				</view>
				<view class="box refund-image mt-2">
					<text>
						退款图片
					</text>
					<view class="">
						<image @tap='previewImg(index)' v-for="(item,index) in refundInfoData.refundImages" class="mr-2" :src="item"
							mode="aspectFill"></image>

					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom box d-jc-end d-f-wrap d-ai-c">
			<text class="btn-refund" @tap="handleRefund(1)" v-if="orderInfo.orderStatus==-3">确认退款</text>
			<text class="btn-refund btn-cancle " @tap="handleRefund(2)" v-if="orderInfo.orderStatus==-3">拒绝退款</text>
		</view>
		
		<mask-model ref="showMask" :btnType=modeView.btnType @confirm="confirm" titleColoe="#666666"
			cancelColor="#666666"  :maskTitle="modeView.maskTitle"></mask-model>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: '',
				orderNumber: this.$store.state.orderNumber,
				refundInfoData: {
					createTime: '',
					typeName: '',
					causeName: '',
					refundRemark: '',
					refundImages: [],
					refundGoods:[]
				},
				Height: 500,
				modeView:{
					btnType: '1', //弹窗样式
					modelType: '', //弹窗类型
					maskTitle:'' //内容
				},
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.Height = res.windowHeight - uni.upx2px(110) //windoHeight为窗口高度，主要使用的是这个

				}
			})
		},
		onLoad() {
			this.getOrderinfo(this.orderNumber)
			this.getRefundOrdersInfo()
		},
		methods: {
			confirm() { //确定按钮
			let parameter = {
				refundStatus: this.modeView.modelType,
				refundId: this.refundInfoData.id,
			}
			this.$api.subRefund(parameter).then(res =>{
				if(res.data.success){
					uni.showToast({
						title: '操作成功',
						duration: 1000,
						icon: "none"
					});
					setTimeout(function() {
						uni.navigateBack(1)
					}, 1000);
				}else{
					uni.showToast({
						title: res.data.message,
						duration: 1000,
						icon: "none"
					});
				}
			})
			
			
			},
			previewImg(index) {
				let _this = this;
				// #ifdef MP
				uni.previewImage({
					current: index - 1,
					urls: _this.refundInfoData.refundImages,
					indicator: 'number',
					loop: true
				});
				// #endif
			
				// #ifndef MP
				uni.previewImage({
					current: index - 1,
					urls: _this.refundInfoData.refundImages,
					indicator: 'number',
					loop: true
				});
				// #endif
			
			},
			handleRefund(type){
				this.modeView.modelType = type
				if(this.modeView.modelType==1){
					this.modeView.maskTitle = '确认同意退款此订单吗？'
				}
				if(this.modeView.modelType==2){
					this.modeView.maskTitle = '确认拒绝退款此订单吗？'
				}
				this.$refs.showMask.show();
			},
			showModel(e) { //打开询问弹窗
				this.$refs.showMask.show();
			},
			
			getRefundOrdersInfo() {
				let parameter = {
					orderNumber: this.orderNumber
				}

				this.$api.getRefundOrdersInfo(parameter).then(res => {
					this.refundInfoData = res.data.dataMap
				})
			},
			getOrderinfo(orderNumber) {
				this.$api.getShopOrdersInfo({
					orderNumber: orderNumber
				}).then((res) => {
					if (res.data.success) {
						this.orderInfo = res.data.dataMap
					} else {
						if (res.data.code != 20001) {
							uni.showToast({
								title: res.data.message,
								duration: 1500,
								icon: "none"
							});
						}
						return;
					}
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	page {

		.bottom {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			position: absolute;
			bottom: 0rpx;
			line-height: 100rpx;
			font-size: 32rpx;

			.btn-refund {
				height: 50rpx;
				width: 150rpx;
				padding: 10rpx 10px;
				background-color: #FF5551;
				line-height: 50rpx;
				border-radius: 50rpx;
				color: #fff;
				text-align: center;
				margin-right: 30rpx;
			}

			.btn-cancle {
				background-color: #CCCCCC;
			}
		}

		.bg-box3 {
			width: 650rpx;
			background-color: #fff;
			min-height: 200rpx;
			margin: 0 auto;
			border-radius: 12rpx;
			margin-top: 30rpx;
			box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
			margin-bottom: 50rpx;

			.refund-image {
				view {
					width: 520rpx;
					min-height: 100rpx;
					background-color: #fff;
					border-radius: 5rpx;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
					}
				}

			}

			.reason {
				text:nth-child(2) {
					width: 480rpx;
					min-height: 100rpx;
					background-color: #F8F8F8;
					border-radius: 10rpx;
					padding: 10rpx;
				}
			}

			.refund-title {
				view:nth-child(1) {
					font-weight: bold;
				}

				view:nth-child(2) {
					color: #FF5551;
				}
			}

		}

		.refund {
			view {
				text:nth-child(1) {
					width: 130rpx;
					color: #999;
				}

			}


		}

		.order-content {
			margin-top: 30rpx;

			.icon-quan {
				font-size: 30rpx;
			}

			.content {
				.text-line {
					text {
						text-decoration: line-through
					}
				}

				.icon-dui {
					color: #FF5551 !important;
				}

				.number {
					color: #666666;
					font-size: 30rpx;
					width: 100rpx;
					text-align: end;
					margin-top: 55rpx;
				}

				image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 10rpx;
				}


			}
		}

		.order-info {
			margin-top: 30rpx;

			view:nth-child(3),
			view:nth-child(5),
			view:nth-child(6),
			view:nth-child(4) {
				font-size: 26rpx;

				text:nth-child(1) {
					color: #999999;
				}

				text:nth-child(2) {
					color: #666666;
				}
			}

			view:nth-child(7) {
				font-size: 30rpx;

				text:nth-child(1) {
					color: #999999;
				}

				text:nth-child(2) {
					color: #FF5551;
				}
			}


		}

		.title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}

		.text-color {
			view:nth-child(2) {
				color: #FF5551;
				font-weight: 500;
			}
		}

		.line {
			width: 100%;
			height: 2rpx;
			background-color: #EEEEEE;
		}
	}
</style>
